<template>
	<view class="edit-pwd">
		<!-- 已废弃 -->
		<NavBar title="修改密码"/>
		<view class="content">
			<view class="form">
				<view class="item">
					<view class="label"> 登陆账号 </view>
					<view class="value"> {{ mobile }} </view>
				</view>
				<view class="item">
					<view class="label"> 原密码 </view>
					<view class="value"> 
						<input type="number" placeholder="请输入您的原密码" placeholder-style="color: #666666;font-size: 14px;" />
					</view>
				</view>
				<view class="item">
					<view class="label"> 新密码 </view>
					<view class="value">
						<input type="number" placeholder="请输入您的新密码" placeholder-style="color: #666666;font-size: 14px;" />
					</view>
				</view>
				<view class="item">
					<view class="label"> 确认密码 </view>
					<view class="value">
						<input type="number" placeholder="请再次输入您的新密码" placeholder-style="color: #666666;font-size: 14px;" />
					</view>
				</view>
			</view>
			<view class="btn" @tap="editPwd"> 确认修改 </view>
		</view>
	</view>
</template>

<script setup>
	import { computed } from 'vue';
	import NavBar from '@/components/NavBar.vue';
	import { useShopStore } from '@/store/index.js'
	const mobile = computed(() => {
		const { shopInfo } = useShopStore()
		return shopInfo.mobile
	})
	const editPwd = () => {
		console.log('editPwd');
	}
</script>

<style lang="scss" scoped>
	.edit-pwd {
		.content {
			padding: 10px 12px;
			box-sizing: border-box;
		}
		.form {
			padding: 0 12px;
			border-radius: 10px;
			background-color: #fff;
			.item {
				height: 50px;
				display: flex;
				align-items: center;
				box-sizing: border-box;
				justify-content: space-between;
				border-bottom: 1px solid #eeeeee;
				&:nth-last-of-type(1) {
					border-bottom: none;
				}
				.label {
					color: #333333;
					font-size: 14px;
					font-weight: 400;
				}
				.value {
					color: #666666;
					font-size: 14px;
					font-weight: 400;
					input {
						color: #666666;
						font-size: 14px;
						font-weight: 400;
						text-align: right;
					}
				}
			}
		}
		.btn {
			height: 40px;
			color: #FFFFFF;
			font-size: 17px;
			font-weight: 500;
			margin-top: 20px;
			line-height: 40px;
			text-align: center;
			border-radius: 106px;
			background: #FF3B1E;
		}
	}
</style>
